<template>
  <div ref="box" id="con">Lorem ipsum dolor sit amet, consectetur.</div>
</template>
<script lang="ts" setup>
import {version, ref, onMounted} from 'vue'

const box = ref(null)

//onMounted() 生命周期函数，此函数在组件挂载完成后执行。
onMounted(() => {
  box.value.innerHTML = 'hello dom text'
  box.value.style.color = 'red'
  box.value.style.width = '300px'
  box.value.style.border = '1px solid gray'

  //
  let c = document.querySelector('#con')
  c.innerHTML = 'hello c innerHTML'
})
</script>

<style scoped>
#con {
  padding: 5px;
  text-align: center;
  border-radius: 15px;
  letter-spacing: 5px;
}
</style>
